<template>
   <div class="pagination-container">
      <select @change="changePageSizeHanle">
         <option v-for="(item,index) in pageSizes" :key="index" :value="item">{{item}}条/页</option>
      </select>
      <div class="pagination-item" @click="clickHandle(currentPage-1)">&lt;</div> 
      <div :class="{'pagination-item':true,active:currentPage==i}" 
        v-for="(i,index) in pageList" 
        :key="index"
        @click="clickHandle(i)">{{i}}</div>
      <div class="pagination-item" @click="clickHandle(currentPage+1)">&gt;</div> 
   </div>
</template>

<script>
export default {
    computed:{
        totalPage(){
            if(this.total%this.pageSize==0){
                return this.total/this.pageSize
            }else{
                return Math.floor(this.total/this.pageSize)+1
            }
        },
        pageList(){
            if(this.totalPage<10){
                return this.totalPage
            }else{
                if(this.currentPage<5){
                    return [1,2,3,4,5,6,'...',this.totalPage]
                }else if(this.currentPage>this.totalPage-5){
                    return [1,'...',this.totalPage-6,this.totalPage-5,this.totalPage-4,this.totalPage-3,this.totalPage-2,this.totalPage-1,this.totalPage]
                }else{
                    return [1,'...',this.currentPage-2,this.currentPage-1,this.currentPage,this.currentPage+1,this.currentPage+2,'...',this.totalPage]
                }
            }
        }
    },
    props:{
        currentPage:{
            type:Number,
            default:1
        },
        total:{
            type:Number|String
        },
        pageSize:{
            type:Number|String,
            default:5
        },
        pageSizes:{
            type:Array,
            default:()=>([10, 20, 30, 40, 50, 100])
        }
    },
    methods:{
        clickHandle(arg){
           if(arg!=="..."){
            //向调用它的组件传递一个事件，这个事件的名称叫current-change
            this.$emit('current-change',arg)
           }
        },
        changePageSizeHanle(arg){
          this.$emit('size-change',arg.target.value)
        }
    }
}
</script>

<style lang="scss" scoped>
    .pagination-container{
        display:flex;
        .pagination-item{
            display: flex;
            border: none;
            background-color: #ccc;
            margin: 5px;
            padding: 5px 10px ;
            color: #999;
        }
        .active{
            background-color: #409EFF;
            color: white;
        }
    }
</style>